<template>
    <!-- 搜索栏 -->
    <el-main height="">
        <el-form :model="searchParams" :rules="rules" label-width="80px" :inline="true" size="small">
            <el-form-item>
                <el-input v-model="searchParams.searchName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="Search" @click="searchBtn">搜索</el-button>
                <el-button :icon="Refresh" style="color: #f67670;" @click="resetBtn">重置</el-button>
                <el-button icon="Plus" type="primary" @click="addBtn">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格列表 -->
        <el-table
            :height="tableHeight"
            :data="tableData.list"
            style="width: 100%"
            row-key="id"
            border
            :tree-props="{ children: 'children'}"
            default-expand-all
        >
            <el-table-column prop="name" label="部门名称" />
            <el-table-column prop="deptCode" label="部门编码" />
            <el-table-column prop="deptPhone" label="部门编码" />
            <el-table-column label="操作" width="250" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" icon="Edit" @click="detailBtn(scope.row)">详情</el-button>
                    <el-button type="primary" size="small" icon="Edit" @click="editBtn(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" icon="Close" v-permission="['sys:deleteDept']" @click="deleteBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-main>

    <!-- 新增或编辑的弹框 -->
    <addAndEditVue ref="addDeptRef" @save="saveBtn"></addAndEditVue>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
import addAndEditVue from './addAndEdit.vue';
import userDeptTable from '@/composables/department/userDeptTable'
import userBaseModel from '@/composables/department/userBaseModel'
import userDept from '@/composables/department/userDept';
import { Refresh } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";

// 表格列表
const { searchParams, tableData, getDeptList, tableHeight } = userDeptTable()
const { rules } = userBaseModel()

// 表格的操作 增删改查
const { searchBtn, addBtn, editBtn, deleteBtn, saveBtn, addDeptRef, resetBtn } = userDept(getDeptList,searchParams)

// 详情跳转
const router = useRouter()
const detailBtn = (row) => {
    console.log('查看详情===', row.id)
    router.push('/department/detail/' + row.id)
}

</script>
<style scoped lang='scss'>
</style>